const path = require("path")
const HtmlWebpackPlugin = require("html-webpack-plugin")
module.exports = {
    mode: "development",
    // 配置对象
    // 配置入口,可以是相对路径
    entry: "./src/main.js",
    output: {
        // 配置出口,必须是绝对路径
        path: path.join(__dirname, "./dist"),
        filename: "bundle.js"
    },
    // 配置插件
    plugins: [
        // 扩展:将HTML代码自动复制并引入到bundle.js文件,同时设置defer属性
        // defer属性:是等页面内容加载完毕后最后执行
        new HtmlWebpackPlugin({ //自动从指定的位置复制HTML到dist目录
            template: "./public/index.html" //指定HTML路径
        })
    ],
    // 目标2:使用loader来处理css文件
    module: {
        // 配置loader属性
        // 配置loader规则
        // 一个对象表示一个规则
        rules: [{
            test: /\.css$/i,
            use: ["style-loader", "css-loader"]
        }, {
            // 目标3:使用loader来处理less文件
            test: /\.less$/,
            use: ["style-loader", "css-loader", "less-loader"]
        }, {
            // 目标4::使用loader来处理图片文件
            test: /\.(png|jpg|gif|jpeg)$/i,
            type: "asset" //自动处理图片，小于8k打包成base64,否则直接复制图片
        }, {
            test: /\.(woff|svg|eot|ttf|woff2)$/,
            type: "asset/resource", //永远不会转换成base64，直接赋值到出口
            generator: { //生成器
                // [name]:占位符变量,最终会被替换成原来的文件名
                // [hash]:生成hash值
                // [ext]:原先的后缀名
                filename: "font/[name][ext]"

            }
        }, {
            test: /\.m?js$/,
            exclude: /(node_modules|bower_components)/,
            use: {
                loader: 'babel-loader',
                options: {
                    presets: ['@babel/preset-env']
                }
            }
        }]
    },
    devServer: {
        port: 3000,  //端口号
        open: true  //自动打开浏览器
    }
}